<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="icon/iconfont.css">
  </head>
  <body>
    <!-- 头部 -->
    <header>

      <div class="">
        <!-- logo区域 -->
        <div class="logo">
            <h1>C<em>a</em>lm</h1>
            <span>欢迎来到我的博客</span>
        </div>
        <!-- 导航栏 -->
        <nav>
          <ul>
            <li>首页</li>
            <li>新闻</li>
            <li>公告</li>
            <li>联系</li>
          </ul>
        </nav>
      </div>
      <div class="box2">
        <!-- 左侧 -->
        <div class="box-left">
          <div class="">
            <h3>Welcome Ladies & Gents to Calm Website.</h3>
          </div>
          <div class="">
            A theme more stylish than any other on ThemeForest.
          </div>
        </div>
        <!-- 右侧 -->
        <div class="box-left">
          <div class="">
            <h3>联系我</h3>
          </div>
          <div class="img-box">
            <ul>
              <li class="qq">
                <i class="iconfont icon-qq"></i>
              </li>
              <li class="wechat">
                  <i class="iconfont icon-wechat"></i>
              </li>
              <li class="weibo">
                <i class="iconfont icon-weibo"></i>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </header>
    <!-- 内容 -->
    <div class="content">
      <div class="content-box">
        <!-- 标签 -->
        <div class="unit">
          <ul>
            <li>All</li>
            <li>图片</li>
            <li>文字</li>
            <li>语音</li>
            <li>视频</li>
          </ul>
        </div>
        <!-- 图片列表 -->
        <div class="list-box">
          <ul>
            <li>
              <img src="images/1.jpg" height="200" width="500" border=0  alt="1" />
              <div class="">
                一<br>
                1582$
              </div>

            </li>
            <li>
              <img src="images/2.jpg" height="200" width="300" border=0 alt="2" />
              <div class="">
                二<br>
                9555$
              </div>

            </li>
            <li>
              <img src="images/3.jpg" height="200" width="300" border=0 alt="3" />
              <div class="">
                三<br>
                6852$
              </div>

            </li>
            <li>
              <img src="images/4.jpg" height="200" width="300" border=0 alt="4" />
              <div class="">
                四<br>
                4888$
              </div>

            </li>
            <li>
              <img src="images/5.jpg" height="200" width="300" border=0 alt="5" />
              <div class="">
                五<br>
                3889$
              </div>

            </li>
            <li>
              <img src="images/6.jpg" height="200" width="300" border=0 alt="6" />
              <div class="">
                六<br>
                6666$
              </div>

            </li>
            <li>
              <img src="images/7.jpg" height="200" width="300" border=0 alt="7" />
              <div class="">
                七<br>
                5559$
              </div>

            </li>
            <li>
              <img src="images/8.jpg" height="200" width="300" border=0 alt="8" />
              <div class="">
                八<br>
                999$
              </div>
            <li>
              <img src="images/9.jpg" height="200" width="300" border=0 alt="9" />
              <div class="">
                九<br>
                8555$
                </div>
            <li>
              <img src="images/10.jpg" height="200" width="300" border=0 alt="10" />
              <div class="">
                十<br>
                8555$
               </div>
            <li>
              <img src="images/11.jpg" height="200" width="300" border=0 alt="11" />
              <div class="">
                十一<br>
                8889$
                </div>
            <li>
              <img src="images/12.jpg" height="200" width="300" border=0 alt="12" />
              <div class="">
                十二<br>
                6666$
                </div>

            </li>
          </ul>
        </div>
      </div>


      <div class="">
        <!-- 新闻栏 -->
        <div class="">

        </div>
        <div class="">

        </div>
        <div class="">

        </div>
        <div class="">

        </div>
      </div>
    </div>


    <!--尾部-->
    <div class="news">
      <div class="new-box">
        <div class="new-list">
            	<h3>售后服务</h3>
               	<div>
                   	<p>服务声明</p>
                    <p>支付说明</p>
                    <p>保修说明</p>
                    <p>地址：北京，上海，银川，等等</p>
                </div>

                      <div class="img-box">
                  <ul class="contact">
                    <li class="qq">
                      <a href="">

                        <i class="iconfont icon-qq"></i>
                      </a>
                    </li>
                    <li class="wechat">
                           <a href="">
                               <i class="iconfont icon-wechat"></i>
                           </a>
                       </li>
                       <li class="weibo">
                           <a href="">
                               <i class="iconfont icon-weibo"></i>
                           </a>
                       </li>
                   </ul>
               </div>
             </div>
             </div>
                <div class="new-list">
                  <h3>热门咨询</h3>
                  <div>
                     	<p>咨询乐器信息</p>
                      <p>咨询乐器音质</p>
                      <p>如何使用乐器</p>

                      <p>乐谱教程</p>
                      <p>相关视屏</p>

                    </div>
                </div>
                  <div class="new-list">
                    <h3>乐器名称</h3>
                    <div>
                       	<p>萨克斯</p>
                        <p>小号</p>
                        <p>黑管</p>
                        <p>圆号</p>
                        <p>吉他</p>
                      </div>
                  </div>

                </div>
</div>
<footer>
  <div class="non-list">
    <h3>欢迎来到我的博客</h3>
  </div>
</footer>

</body>
</html>
